<template>
	<div>
		<navigationBar :bgType="3" :backType="2" navigationTitle="订单详情" />

		<view class="wrap paddingBottom" :style="{ '--navigation-height': navigationHeight + 'px' }" v-if="dataInfo">
			<image class="wrap-bg" :src="getImageURL('navigationBar/top_bg.png')" mode="widthFix" />

			<view class="order-status f-32 flex column just-center">
				<view class="status f-32">
					{{ dataInfo.status_text }}
				</view>

				<view class="down-time f-24" v-if="dataInfo.status === '1'">
					请在{{ minute }}分{{ second }}秒内完成支付，逾期订单将自动取消
				</view>
			</view>

			<view class="order-process white-bg flex align-center mtp">
				<block v-for="(item, index) in process_list" :key="index">
					<view class="process-item">
						<view class="flex column align-center just-center">
							<view
								class="process-icon flex align-center just-center"
								:class="{
									'process-icon-active': item.status <= dataInfo.status,
								}"
							>
								<image
									mode="heightFix"
									:src="
										getImageURL(
											`technician/order/${item.icon}_${
												item.status <= dataInfo.status ? 'active' : 'normal'
											}.png`
										)
									"
								/>
							</view>

							<view
								class="process-title f-24"
								:class="{
									active: item.status <= dataInfo.status,
								}"
							>
								{{ item.title }}
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="mtp wrap-info white-bg">
				<view class="title-color fb-28"> 预约内容 </view>

				<view class="info-bg flex align-center">
					<image class="file" :src="dataInfo.goods.service_cover" />

					<view class="info-right">
						<view class="title-color fb-30 limit-num-line">
							{{ dataInfo.goods.service_name }}
						</view>

						<view class="service-time f-26"> 服务时长:{{ dataInfo.time_long }}分钟 </view>

						<view class="price price-color">
							<text class="symbol fb-24">¥</text>
							<text class="fb-32">{{ dataInfo.service_price }}</text>
						</view>
					</view>

					<view class="title-color f-26"> x{{ dataInfo.goods.num }} </view>
				</view>
			</view>

			<view class="wrap-address-bg white-bg mtp">
				<view class="title-color fb-28"> 客户信息 </view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 下单人: </view>
					<view class="value f-28">
						{{ dataInfo.address.name }}
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 联系方式: </view>
					<view class="value f-28">
						{{ dataInfo.address.mobile }}
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 服务地址: </view>
				</view>

				<view class="value f-28 address">
					{{ dataInfo.address.address }}
					{{ dataInfo.address.street_name }}
					{{ dataInfo.address.community_name }}
					{{ dataInfo.address.area }}
				</view>
			</view>

			<view class="mtp wrap-technician-info white-bg">
				<view class="title-color fb-28"> 订单信息 </view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 服务师: </view>
				</view>

				<view class="technician-info flex align-center just-between">
					<image class="avatar" :src="dataInfo.technician.work_image" />

					<view class="nickname-distance">
						<view class="title-color f-28">
							{{ dataInfo.technician.name }}
						</view>

						<view class="distance f-24" v-if="dataInfo.status === '4'">
							当前距您{{ dataInfo.left_distance }}km
						</view>
					</view>

					<view class="btn-bg flex align-center" v-if="dataInfo.status !== '6' && dataInfo.status !== '7'">
						<view class="f-28" @click="onOpenLocation" v-if="dataInfo.status === '4'"> 实时位置 </view>
						<view class="f-28" @click="onCallPhone"> 联系ta </view>
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 下单时间: </view>

					<view class="value f-28">
						{{ dataInfo.createtime_text }}
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 服务时间: </view>

					<view class="value f-28">
						{{ dataInfo.start_service_time_text }}
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 车费详情: </view>

					<view class="value f-28">
						{{ $filters.getTravelTypeText(dataInfo.car_type) }}
						全程{{ dataInfo.distance }}km
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 出行费用: </view>

					<view class="value f-28 price-color">
						{{ $filters.getTravelTypeText(dataInfo.car_type) }}
						¥{{ dataInfo.car_price }}
					</view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 项目费用: </view>

					<view class="value f-28 price-color"> ¥{{ dataInfo.service_price }} </view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 备注: </view>

					<view class="value f-28"> {{ dataInfo.remark }} </view>
				</view>

				<view class="content-item flex align-center just-between">
					<view class="left f-28"> 支付方式: </view>

					<view class="value f-28">
						{{ dataInfo.pay_type_text }}
					</view>
				</view>

				<view class="total-price flex align-center just-end f-28">
					<text class="title-color">总计：</text>
					<text class="price-color"> ¥{{ dataInfo.total_price }} </text>
				</view>
			</view>

			<view class="mtp">
				<orderProgress :dataInfo="dataInfo" />
			</view>
		</view>

		<view class="footer safe-area flex align-center just-end" v-if="dataInfo">
			<orderBtn :btnType="'2'" :dataInfo="dataInfo" @onRefresh="getData" @onApplyRefund="onApplyRefund" />
		</view>
	</div>
</template>

<script>
	import { orderDetail } from "@/API/order.js";
	import orderBtn from "@/subPages/components/orderBtnBg/orderBtnBg.vue";
	import orderProgress from "@/subPages/components/orderProgress/orderProgress.vue";
	export default {
		components: {
			orderBtn,
			orderProgress,
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight, // 导航栏高度
				orderID: "", // 订单ID

				downTimer: null, //倒计时
				minute: 0, // 订单超时时间的分钟数
				second: 0, // 订单超时时间的秒数
				dataInfo: null, // 订单详情数据

				process_list: [
					{
						title: "技师接单",
						status: "3",
						icon: "jsjd",
					},
					{
						title: "技师出发",
						status: "4",
						icon: "jscf",
					},
					{
						title: "技师到达",
						status: "5",
						icon: "jsdd",
					},
					{
						title: "开始服务",
						status: "6",
						icon: "ksfw",
					},
					{
						title: "服务完成",
						status: "7",
						icon: "fwwc",
					},
				],
			};
		},
		onLoad(options) {
			this.orderID = options.order_id;
			this.getData();
		},
		methods: {
			/**
			 * 实时位置
			 */
			onOpenLocation() {
				uni.openLocation({
					latitude: parseFloat(this.dataInfo.technician.lat),
					longitude: parseFloat(this.dataInfo.technician.lng),
					address: this.dataInfo.technician.address,
				});
			},
			/**
			 * 联系技师
			 */
			onCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.dataInfo.technician.mobile.toString(),
				});
			},

			/**
			 * 倒计时计算
			 */
			calculationDownTime() {
				const now = new Date().getTime();
				const end = this.dataInfo.autocancel * 1000;
				const surplus = Math.floor((end - now) / 1000);

				if (surplus <= 0) {
					clearInterval(this.downTimer);
					// this.getData();
					return;
				}
				const second = Math.floor(surplus % 60);
				const minute = Math.floor(surplus / 60);

				this.minute = minute.toString().padStart(2, "0");
				this.second = second.toString().padStart(2, "0");
			},
			/**
			 * 网络请求
			 */
			getData() {
				orderDetail(this.orderID).then((res) => {
					this.dataInfo = res.data;
					clearInterval(this.downTimer);
					if (this.dataInfo.status === "1") {
						this.calculationDownTime();
						this.downTimer = setInterval(() => {
							this.calculationDownTime();
						}, 1000);
					}
				});
			},
            // 申请退款
            onApplyRefund(id) {
                uni.navigateTo({
                    url: `/subPages/technician/recruit/refund?order_id=${id}`,
                });
            }
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 140rpx;
		--limit-num: 1;
		position: relative;
		z-index: 1;
		padding: 20rpx;
		box-sizing: border-box;

		.white-bg {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 10rpx;
		}

		.order-status {
			width: 100%;
			height: 88rpx;
			overflow: hidden;

			.status {
				color: $bg-text-color;
			}

			.down-time {
				color: $bg-text-color;
				margin-top: 15rpx;
			}
		}

		.order-process {
			height: 186rpx;

			.process-item {
				display: inline-block;
				flex: 1;
				overflow: hidden;
				height: 186rpx;

				> view {
					width: 100%;
					height: 100%;

					.process-icon {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						border: 2rpx solid #666666;

						> image {
							height: 48rpx;
						}
					}
					.process-icon-active {
						border-color: $theme-color !important;
					}

					.process-title {
						margin-top: 15rpx;
						color: $title-color;
					}
				}
			}
		}

		.wrap-info {
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.info-bg {
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;

				.file {
					width: 176rpx;
					height: 176rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}

				.info-right {
					margin-left: 20rpx;
					flex: 1;
					overflow: hidden;
					margin-right: 10rpx;

					.service-time {
						margin-top: 24rpx;
						color: #a3a3a3;
					}

					.price {
						margin-top: 24rpx;

						.symbol {
							margin-right: 5rpx;
						}
					}
				}
			}
		}

		.wrap-address-bg {
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.address {
				text-align: left !important;
				margin-top: 30rpx;
				line-height: 40rpx;
			}
		}

		.wrap-technician-info {
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.technician-info {
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;

				.avatar {
					width: 82rpx;
					height: 82rpx;
				}

				.nickname-distance {
					margin-left: 30rpx;
					flex: 1;
					overflow: hidden;

					.distance {
						margin-top: 12rpx;
						color: #b0b0b0;
					}
				}

				.btn-bg {
					margin-left: 10rpx;
					overflow: hidden;

					> view {
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: $theme-color;
						border-radius: 6rpx;
						border: 2rpx solid $theme-color;
						margin-right: 20rpx;
						padding: 0 15rpx;

						&:last-child {
							margin-right: 0rpx;
						}
					}
				}
			}

			.total-price {
				margin-top: 30rpx;
				padding-top: 30rpx;
				border-top: 2rpx solid #ececec;
			}
		}
	}

	.title-color {
		color: $title-color;
	}

	.price-color {
		color: $price-color !important;
	}

	.content-item {
		width: 100%;
		overflow: hidden;
		margin-top: 30rpx;
	}
	.left {
		color: #999999;
		margin-right: 20rpx;
	}

	.value {
		flex: 1;
		text-align: right;
		color: $title-color;
	}

	.mtp {
		margin-top: 20rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: calc(100% - 40rpx);
		height: 128rpx;
		padding: 0 20rpx;
		background-color: white;
		z-index: 10;
	}
</style>
